<template>
  <div class="mysql">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="数据源名称" prop="conName">
        <input type="hidden" v-model="ruleForm.id">
        <el-input v-model="ruleForm.conName" @input="changeName"></el-input>
    </el-form-item>
    <el-form-item label="服务器" prop="conHost">
        <el-input v-model="ruleForm.conHost"></el-input>
    </el-form-item>
    <el-form-item label="端口" prop="conPost">
        <el-input v-model="ruleForm.conPost"></el-input>
    </el-form-item>
    <el-form-item label="用户名" prop="conAccount">
        <el-input v-model="ruleForm.conAccount"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="conPasswd">
        <el-input v-model="ruleForm.conPasswd"></el-input>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">连接</el-button>
    </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {saveMysql} from "@/api/datalink"
export default {
  name: 'MySQL',
  // props: {
  //     childname: {
  //         type: Object,
  //         default: {}
  //     }
  // },
   data () {
    return {
        childname:{},
        sqlId:'',
        rules: {
        conName: [
            { required: true, message: '请输入数据源名称', trigger: 'blur' },
            
          ],
          conHost: [
            { required: true, message: '请输入服务器', trigger: 'blur' },
            
          ],
          conPost: [
            { required: true, message: '请输入端口', trigger: 'blur' },
            
          ],
          conAccount: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            
          ],
          conPasswd: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            
          ],
      },
      ruleForm:{
        conName:'',
        conHost:'',
        conPost:'',
        conAccount:'',
        conPasswd:''
      },
    }
  },
  mounted(){
    this.initData()
  },
 watch:{
        "$route": "routeLoad",
        // childname:{handler:function (newValue, oldValue) {
        //     this.childname=newValue;
        // }
    },
  methods:{
    initData(){
      console.log(this.childname);
      this.childname=this.$store.state.formType
      if(this.childname.id){
         this.ruleForm.id=this.childname.id
         this.ruleForm.conName=this.childname.conName
          this.ruleForm.conType=this.childname.conType
          this.ruleForm.conHost=this.childname.conHost
          this.ruleForm.conPost=this.childname.conPost
          this.ruleForm.conPasswd=this.childname.conPasswd
          this.ruleForm.conAccount=this.childname.conAccount
      }
      
    },
    routeLoad(){
             this.sqlId=this.$route.query.sqlId
        },
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            saveMysql(this.ruleForm).then(res=>{
              console.log(res);
              if(res.data.errorNo=="0"){
                let result=res.data.errorMsg
                console.log(result);
                this.$store.commit('changetab',{isSuccess:true,tabindex:1});
                this.$router.push({path:"/datalink/baselink/"+this.$store.state.formType.conType,query:{sqlType:this.$store.state.formType.conType,sqlId:this.$store.state.formType.id,tabindex:"1"}})
                this.$message({
                  message: result,
                  type: 'success'
                });
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      
      changeName(e){
        console.log(e);
        this.$store.state.formType.conName=e;
        this.$emit('childevent',e);
      }
  }
}
</script>

<style>
.mysql{
    width: 60%;
}
</style>